<template>
  <div id="user">
    <el-card class="box-card"
             style="min-height: 700px">
      <!--标题及查询区域-->
      <el-card shadow="hover"
               :body-style="{ padding: '0px' }"
               style="border-bottom: solid #eff7ff 3px">
        <div class="grid-content grid-con-1">
          <span class="grid-con-icon">用户管理</span>
          <div class="grid-cont-right">
            <el-row :gutter="20">
              <el-col :span="4">
                <div style="line-height: 2.5rem">用户名</div>
              </el-col>
              <el-col :span="6">
                <el-input v-model="search.username"
                          autocomplete="off"
                          placeholder="请输入用户名">
                </el-input>
              </el-col>
              <el-col :span="4">
                <div style="line-height: 2.5rem">姓名</div>
              </el-col>
              <el-col :span="6">
                <el-input v-model="search.name"
                          autocomplete="off"
                          placeholder="请输入姓名">
                </el-input>
              </el-col>
              <el-col :span="4">
                <div class="grid-cont-right">
                  <!-- 添加项目的按钮 -->
                  <el-button type="primary"
                             icon="el-icon-search"
                             @click="getInitData"
                             plain>
                    查询
                  </el-button>
                </div>
              </el-col>
            </el-row>
          </div>
          <div style="width:200px;text-align:right;margin-right:20px;">
            <!-- 添加项目的按钮 -->
            <el-button type="primary"
                       icon="el-icon-plus"
                       @click="showEdit(null)"
                       plain>
              添加用户
            </el-button>
          </div>
        </div>
      </el-card>

      <!-- 数据列表区域 -->
      <el-card style="margin-top: 20px;">
        <el-table :data="users"
                  style="width: 100%;margin-top: 20px;"
                  size="mini">
          <el-table-column prop="id"
                           label="序号"
                           width="50">
          </el-table-column>
          <el-table-column prop="username"
                           label="用户名"
                           width="100">
          </el-table-column>
          <el-table-column prop="name"
                           label="姓名"
                           width="100">
          </el-table-column>
          <el-table-column prop="email"
                           label="邮箱"
                           width="200">
          </el-table-column>
          <el-table-column prop="mobile"
                           label="电话"
                           width="100">
          </el-table-column>
          <el-table-column prop="roles"
                           label="角色"
                           width="150">
            <template slot-scope="scope">
              <el-tag type="info"
                      v-for="item in scope.row.roles"
                      :key="item"
                      style="margin-right:2px">{{ item }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createByName"
                           label="创建人"
                           width="100">
          </el-table-column>
          <el-table-column prop="createTime"
                           label="创建时间"
                           width="150">
          </el-table-column>
          <el-table-column prop="updateByName"
                           label="修改人"
                           width="100">
          </el-table-column>
          <el-table-column prop="updateTime"
                           label="修改时间"
                           width="150">
          </el-table-column>
          <el-table-column prop="lastLoginTime"
                             label="登录时间"
                             width="150">
            </el-table-column>
          <el-table-column fixed="right"
                           label="操作"
                           width="180">
            <template slot-scope="scope">
              <el-button @click="remove(scope.row.id)"
                         type="danger"
                         size="mini"
                         plain
                         icon="el-icon-delete"
                         >删除</el-button>
              <el-button type="primary"
                         size="mini"
                         @click="showEdit(scope.row.id)"
                         plain
                         icon="el-icon-outlin">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="search.pageIndex"
                       :page-sizes="[10, 20, 30, 50]"
                       :page-size="search.pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
      </el-card>
    </el-card>
    <el-dialog :title="gettitle"
               :visible="editVisible"
               :before-close="callbackForCancel"
               :close-on-click-modal="false"
               center>
      <user-edit :id="currentId"
                 @callbackForSave="callbackForSave"
                 @callbackForCancel="callbackForCancel"
                 v-if="editVisible">
      </user-edit>
    </el-dialog>
  </div>
</template>


<script>
import * as userApi from '../api/user'
import UserEdit from '../components/user/UserEdit.vue'
export default {
  name: 'users',
  components: {
    UserEdit,
  },
  data() {
    return {
      gettitle:"编辑",
      editVisible: false,
      users: [],
      search: {
        pageIndex: 1,
        pageSize: 10,
        username: '',
        name: '',
      },
      total: 0,
      currentId: null,
    }
  },
  created() {
    this.getInitData()
  },
  methods: {
    getInitData() {
      userApi.query(this.search).then((response) => {
        let result = response.data
        this.users = result.data
        this.total = result.total
      })
    },
    remove(id) {
      this.$confirm('确认删除吗？', '提示', {
        confirmButtonText: '确认',
        cancelButtonTxt: '取消',
        type: 'warning',
      })
        .then(() => {
          userApi.remove(id).then((response) => {
            if (response.data.code == 0) {
              //成功提示
              this.$message({
                message: '删除成功',
                type: 'success',
              })
              //重新加载数据
              this.getInitData()
            } else {
              //处理异常
              this.$message({
                message: response.data.message,
                type: 'warning',
              })
            }
          })
        })
        .catch(() => {
          this.$message({
            message: '已取消',
            type: 'info',
          })
        })
    },
    showEdit(id) {
      //传递id
      this.currentId = id
      if (id === null || id === undefined) {
        this.gettitle="新增"
      }
      //展示弹框
      this.editVisible = true
    },
    //保存回调
    callbackForSave() {
      this.editVisible = false
      //重新获取数据
      this.getInitData()
    },
    //取消回调
    callbackForCancel() {
      this.editVisible = false
    },
    handleSizeChange(val) {
      this.search.pageSize = val
      //重新加载数据
      this.getInitData()
    },
    handleCurrentChange(val) {
      this.search.pageIndex = val
      //重新加载数据
      this.getInitData()
    },
  },
}
</script>



<style scoped>
.grid-content {
  display: flex;
  align-items: center;
  height: 80px;
}

.grid-cont-right {
  flex: 1;
  font-size: 16px;
  color: #000;
  font-weight: bold;
  text-align: right;
  margin-right: 20px;
}

.grid-con-icon {
  font-size: 24px;
  width: 400px;
  height: 80px;
  text-align: center;
  line-height: 80px;
  color: #409eff;
  font-weight: bold;
}

.grid-con-1 .grid-con-icon {
  background: #eff7ff;
}
</style>